<!--    
事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。
比如我们给一个div 注册了点击事件：

DOM 事件流分为3个阶段： 
1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段 

事件冒泡： IE 最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程。
事件捕获： 网景最早提出，由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。 

我们向水里面扔一块石头，首先它会有一个下降的过程，
这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，
会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。 
 
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
            margin-top: 200px;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: blue;
            margin: 50px auto;

        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>

    <script>
        //dom事件流 三个阶段
        //         JS 代码中只能执行捕获或者冒泡其中的一个阶段。
        //         onclick 和 attachEvent 只能得到冒泡阶段。
        //         addEventListener(type, listener[, useCapture])第三个参数如果是 true，
        //那么则处于捕获阶段 document->html->body->father->son

        // var son = document.querySelector('.son');
        // son.addEventListener('click', function () {
        //     alert('son');
        // }, true)

        // var father = document.querySelector('.father');
        // father.addEventListener('click', function () {
        //     alert('father');   //先执行father监听器
        // }, true)


        // 冒泡阶段  第三个参数是false或者是省略 ，那么则处于冒泡阶段(从下往上冒泡)
        // var son = document.querySelector('.son');
        // son.addEventListener('click', function () {
        //     alert('son');
        // }, true)

        // var father = document.querySelector('.father');
        // father.addEventListener('click', function () {
        //     alert('father');   //先执行father监听器
        // }, true)

        // document.addEventListener('click', function () {
        //     alert('document');   //冒泡最后执行，从上往下
        // }, true)


    </script>
</body>

</html>